<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="tips fboxRow Ycenter font24 color-969699 bg-F7F8FF" v-if="active.length == 2 || fromData.industry">当前所选择行业: {{ active[1] || fromData.industry }}</view>
		<view class="tips fboxRow Ycenter font24 color-969699 bg-F7F8FF" v-else>请选择所属行业</view>
		<view class="list-wrap fboxWrap">
			<view class="wrap fboxRow">
				<view class="left-tags">
					<view class="tag" :class="[active[0] == 'buxian' ? 'font28 color-main font-weight' : 'font24 color-969699']" @click="itemTap(0, 'buxian')">不限</view>
					<view
						class="tag"
						v-for="(item, index) in dataList"
						:key="index"
						:class="[item.industryName == active[0] ? 'font28 color-main font-weight' : 'font24 color-969699']"
						@click="itemTap(0, item)"
					>
						{{ item.industryName }}
					</view>
				</view>
				<view class="right-tags flex1">
					<template v-for="(item, index) in dataList">
						<view class="tags" v-if="active[0] == 'buxian' || active[0] == item.industryName" :key="index">
							<view class="hd fboxRow Ycenter color-main font28 font-weight">{{ item.industryName }}</view>
							<view class="bd fboxWrap">
								<view
									class="tag fboxWrap Xcenter Ycenter font24 zyback"
									v-for="(sub, i) in item.children"
									:class="[sub.industryName == active[1] || sub.industryName == fromData.industry ? 'bg-main color-FFF' : 'bg-F7F8FF color-969699']"
									:key="i"
									@click="itemTap(1, sub)"
								>
									{{ sub.industryName }}
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<BottomBtn title="保存" @btnClick="verifyTap"></BottomBtn>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { strTrim } from '@/static/js/common.js';
import { industryList } from '@/api/mine.js';
import { editMixinsMine } from './edit.mixins.mine.js';
export default {
	mixins: [editMixinsMine],
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			dataList: [],
			active: ['buxian'],
			fromData: {
				industry: ''
			}
		};
	},
	onLoad() {
		this.getList();
	},
	onShow() {},
	methods: {
		getList() {
			industryList().then(res => {
				this.dataList = res.data;
			});
		},
		itemTap(i, obj) {
			if (i == 0) {
				this.active = obj == 'buxian' ? ['buxian'] : [obj.industryName];
			} else {
				this.active.splice(1, 1, obj.industryName);
				this.fromData.industry = obj.industryName;
			}
		},
		verifyTap() {
			const { industry } = this.fromData;
			if (strTrim(industry)) {
				this.putInfo();
			} else {
				uni.showToast({
					icon: 'none',
					title: '请选择所属行业'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	position: relative;
}
.list-wrap {
	padding: 62rpx 0 160rpx;
	height: calc(100vh);
	overflow: hidden;
}
.wrap {
	height: 100%;
	overflow: hidden;
}
.bg-main{
	background-color: var(--pureButtonBackOneColor) !important;
	color: var(--contourButtonTextColor);
}
.tips {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 30rpx;
	height: 62rpx;
}

.left-tags {
	width: 185rpx;
	border-right: 1rpx solid #f0f1f5;
	height: 100%;
	overflow-y: auto;
}
.right-tags {
	height: 100%;
	overflow-y: auto;
}

.left-tags .tag {
	padding: 30rpx;
	line-height: 36rpx;
}
.tags {
	padding: 10rpx 0;
	margin-right: -30rpx;
}
.tags .hd {
	padding: 0 30rpx;
	height: 70rpx;
}
.tags .bd {
	padding: 0 0 0 30rpx;
}
.tags .bd .zyback{
	background-color: #ffffff;
	border-radius: 12rpx;
}
.right-tags .tag {
	margin: 20rpx 20rpx 0 0;
	padding: 0 28rpx;
	width: 242rpx;
	height: 68rpx;
	// background: #F7F8FF;
	border-radius: 4rpx;
	text-align: center;
	// color:#666564;
	line-height: 34rpx;
	overflow: hidden;
}
.right-tags .tag .active {
	background-color: #fb793f;
	color: #fff;
}

.fixed-space {
	height: 128rpx;
	background: #ffffff;
}

.fixed-btn {
	position: fixed;
	left: 50%;
	bottom: 20rpx;
	margin-left: -335rpx;
	width: 670rpx;
	height: 88rpx;
	border-radius: 8rpx;
}
</style>
